<template>
  <div class="bookInfo">
    <el-card>
      <h2>图书详情</h2>
      <div style="display: flex;">
    <img v-if="this.bookInfo.bookId===4000002" src="@/assets/imgs/4000002.png" style="height: 300px; width: 200px;margin-top: 20px;margin-right: 50px;"/>
    <img v-else-if="this.bookInfo.bookId===4000004" src="@/assets/imgs/4000004.png" style="height: 300px; width: 200px;margin-top: 20px;margin-right: 50px;"/>
    <img v-else-if="this.bookInfo.bookId===4000005" src="@/assets/imgs/4000005.png" style="height: 300px; width: 200px;margin-top: 20px;margin-right: 50px;"/>
    <img v-else-if="this.bookInfo.bookId===4000012" src="@/assets/imgs/4000012.png" style="height: 300px; width: 200px;margin-top: 20px;margin-right: 50px;"/>
    <img v-else src="@/assets/imgs/common.png" style="height: 300px; width: 200px;margin-top: 20px;margin-right: 50px;"/>
    <el-descriptions direction="vertical" :column="4" border :label-align="center">
    <el-descriptions-item label="图书编号" >{{ bookInfo.bookId }}</el-descriptions-item>
    <el-descriptions-item label="书名">{{bookInfo.bookName}}</el-descriptions-item>
    <el-descriptions-item label="出版社" :span="2">{{ bookInfo.press }}</el-descriptions-item>
    <el-descriptions-item label="种类">
      {{ bookInfo.category }}
    </el-descriptions-item>
    <el-descriptions-item label="作者">
      {{ bookInfo.author }}
    </el-descriptions-item>
    <el-descriptions-item label="ISBN" :span="2">
      {{ bookInfo.ISBN }}
    </el-descriptions-item>
    <el-descriptions-item label="所有者">
      {{ bookInfo.owner }}
    </el-descriptions-item>
    <el-descriptions-item label="价格">
      {{ bookInfo.price }}
    </el-descriptions-item>
    <el-descriptions-item label="数量" :span="2">
      {{ bookInfo.quantity }}
    </el-descriptions-item>
    <el-descriptions-item label="简介" :span="4">
      {{ bookInfo.description }}
    </el-descriptions-item>
  </el-descriptions>
</div>
    <el-row>
        <el-button plain @click="borrow" type="primary">借阅</el-button>
        <el-button plain @click="back=>{this.$router.push({name: 'Books'})}" type="primary">返回</el-button>
    </el-row>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:   'BookInfo',
    data(){
        return{
            bookInfo: {},
        }
    },
    methods:{
      //使用结构赋值进行异常处理
			promise_error_process(promise){
				return promise.then(data=>[null,data])
								.catch(err=>[err,null])
			},

      async borrow(){
        const [err,result] = await this.promise_error_process(this.borrowBookByAjax(this.$route.query.bookId))
        if(err){
          console.log(err)
        }
        else{
          console.log(result)
          ElMessageBox.confirm('借阅已成功，您可以到我的借阅中查看借阅的详细信息', '借阅成功', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'success' // 设置对话框类型为成功
        }).then(() => {
          ElMessage({
            type: 'success',
            message: '借阅成功'
          });
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '取消'
          });
        });
        }
      },
      async borrowBookByAjax(bookId){
        const response = await axios({
          url:      `http://127.0.0.1:8080/api/borrow/${this.username}/${bookId}`,
          method:   'GET',
          withCredentials:  true
        })
        return response
      },

      //获取图书详情
      async getBookInfoByAjax(bookId){
        const response = await axios({
          url:        `http://127.0.0.1:8080/api/books/bookInfo/${bookId}`,
          method:     'GET',
          withCredentials: true
        })
        return response
      },
      async getBookInfo(){
        const [err , result] = await this.promise_error_process(this.getBookInfoByAjax(this.$route.query.bookId))
        if(err){
          console.log("请求错误")
        }
        else{
          console.log("1110"+this.$route.query.bookId)
          console.log(result.data.data.book)
          this.bookInfo = result.data.data.book
        }
      }
    },
    created(){
      console.log(this.$route.query)
      this.getBookInfo()
    }
}
</script>

<style scoped>
.bookInfo{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.el-card{
  width: 80%;
}
.el-row {
  display: flex;
  justify-content: center; /* 让按钮水平居中 */
}

.el-button {
  margin: 0 10px; /* 可以根据需要调整按钮之间的间距 */
  margin: 15px;
}
.el-descriptions {
  text-align: center; /* 让文字内容居中 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.el-descriptions__body .el-descriptions__table .el-descriptions__cell{
  text-align: center;
}
.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell{
  text-align: center;
}
</style>